<template>
    <z-paging ref="paging" v-model="list" @query="queryList">
        <view>
            <block v-for="(item, index) in list" :key="index">
                <view class="invoice u-flex u-row-between u-col-center">
                    <view class="invoice-info">
                        <view class="invoice-info-time">{{ item.addTime }}</view>
                        <view>
                            <text>开票金额：</text>
                            <text class="invoice-info-price">￥{{ Number(item.invoiceAmount).toFixed(2) }}</text>
                        </view>
                    </view>
                    <view @click="showDetail(item.id)">
                        <text>{{ item.statusName }}</text>
                        <text class="icon icon-right u-margin-left-20"></text>
                    </view>
                </view>
            </block>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store'

const list = ref<Array<any>>([])

const paging = ref<any>(null)

const userStore = useUserStore()

const queryList = (pageNo: number) => {
    uni.$u.$api.OrderApi.queryOrderInvoiceList({
        merchantId: userStore.userInfo.merchantId,
        current: pageNo
    })
        .then((res: any) => {
            paging.value?.complete(res.records)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}
const showDetail = (id: number | string) => {
    uni.$u.$MRouter.invoiceDetail.to({ id })
}
</script>

<style scoped lang="scss">
.invoice {
    padding: 20rpx 30rpx;
    background-color: $uni-bg-color;
    margin-top: 20rpx;

    &-info {
        line-height: 60rpx;

        &-time {
            font-size: 24rpx;
        }

        &-price {
            color: #ff2442;
        }
    }
}
</style>
